<template>
  <div>
    <el-timeline class="eg-timeline-parallel-todo">
      <el-timeline-item class="line-item" v-for="line in flowListArr" :key="line.nodeId">
        <div class="line-right">
          <parallel-node
            :ref="'route' + line.nodeId"
            v-if="line.type == 'route'"
            :line="line"
            :curNodeIDs="curNodeIDs"
            :source="'todo'"
          ></parallel-node>
          <p class="list-node" v-else>
            {{ line.name }}
          </p>
          <p class="list-node-name" v-if="line.type == 'start'">{{ line.properties.contentLabel }}</p>
          <!-- 单人 显示名称 -->
          <p class="list-node-name" v-if="line.type !== 'start' && getApprovalList(line).length == 1">
            {{ getApprovalList(line)[0].RY_JBXX__NAME }}
            <span
              >{{ getstatus(line) }}
              <eg-button
                v-if="line.status == 1 && curNodeIDs.includes(line.nodeId)"
                :attrObject="attrObject"
                @clickButton="cbClick"
              ></eg-button
            ></span>
          </p>
          <!-- 时间 -->
          <p class="node-handle-time" v-if="line.status != '1'">{{ line.handleTime }}</p>
          <span v-if="getApproveNode(line)">
            <span v-if="getApprovalList(line).length == 0 && line.noneActionerAction == 'autoPass'">{{
              getNoneActionerAction(line) == "autoPass" ? "(自动通过)" : "(转交管理员)"
            }}</span>
          </span>
          <span v-if="line.status == '7'">(转审批)</span>
          <span v-if="line.type == 1"
            >{{ getApprovalList(line).length + getActType(line, "or") ? "人或签" : "人会签" }}
            <eg-button
              v-if="line.status == 1 && curNodeIDs.includes(line.nodeId)"
              :attrObject="attrObject"
              @clickButton="cbClick"
            ></eg-button
          ></span>
          <span v-if="getAppproveOriNode(line)">(发起人自己)</span>

          <!-- 多人头像 -->
          <eg-head-group
            v-if="getApprovalList(line).length > 1"
            :photoList="getApprovalList(line)"
            :isName="true"
            :hasMaxLength="false"
            :isphotoDel="getRuleType(line) == 'target_select'"
            :isAdd="false"
            :ellipsis="false"
            :linerGrident="false"
          ></eg-head-group>

          <!-- 审批意见 -->
          <p
            class="node-opinion"
            v-if="
              (line.handleOpinion && sourceName == 'todo') ||
                (line.handleOpinion && opinionVisible == '0' && sourceName == 'application')
            "
          >
            {{ line.handleOpinion }}
          </p>
        </div>
        <template #dot>
          <!-- 发起人头像 -->
          <eg-photo type="after" :width="32" :height="32" v-if="line.type == 'start'" :photo="startPhoto"></eg-photo>
          <!-- 并行分支头像 -->
          <span class="circle" v-else-if="line.type == 'route'">
            <eg-svg
              :svgId="'bingxingfenzhi'"
              :width="20"
              :height="20"
              :color="'#ffffff'"
              :backgroundColor="'#3F8FFF'"
              :verticalAlign="'-2px'"
              :mright="0"
            />
          </span>
          <!-- 抄送头像 -->
          <span class="circle" v-else-if="line.type == 'notifier'">
            <eg-svg
              :svgId="'icon_notifier'"
              :width="32"
              :height="32"
              :color="'#ffffff'"
              :backgroundColor="'#3F8FFF'"
              :verticalAlign="'-2px'"
              :mright="0"
            />
          </span>
          <!-- 单人头像 -->
          <template v-else>
            <template v-if="getApprovalList(line).length <= 1">
              <eg-photo :width="32" :height="32" type="after" :photo="getApprovalList(line)[0]"></eg-photo>
            </template>
            <!-- 多人头像 -->
            <template v-else>
              <span class="circle">
                <eg-svg
                  :svgId="'icon_manypeople'"
                  :width="32"
                  :height="32"
                  :color="'#ffffff'"
                  :backgroundColor="'#3F8FFF'"
                  :verticalAlign="'-2px'"
                  :mright="0"
                />
              </span>
            </template>
          </template>
          <!-- 状态图标 -->
          <eg-svg
            :svgId="getIconName(line)"
            :backgroundColor="'transparent'"
            :width="14"
            :height="14"
            class="status-icon"
          />
        </template>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script>
import ParallelNode from "./ParallelNode.vue";
/**
 * @module EgTimelineParallelTodo
 * @author 何志强
 * @description 流程平行分支节点申请单，配置审批流程节点
 */
export default {
  components: { ParallelNode },
  name: "EgTimelineParallelTodo",
  data() {
    return {
      attrObject: {
        type: "link",
        size: "small",
        text: "催办"
      },
      token: sessionStorage.getItem("Authorization"),
      defaultImg: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', //默认图地址
      treeType: "orgTree",
      addIndex: "",
      selctmodel: "",
      orgIds: [],
      multiple: false,
      flowListArr: [],
      handlerNode: null,
      cbfunck: null,
      startPhoto: {}
    };
  },
  /**
   * Props 接受父组件的传值 重要参数
   * @prop {Array} flowList 流程节点数据源
   */
  props: {
    flowList: {
      type: Object,
      default: function() {
        return {
          nextId: "7954f7a941704b65a029ce250c8adb28,c6eeb77f3dc242aebc6ec96852b28ee3",
          auth: [
            {
              name: "金额",
              value: "1",
              key: "7ba099ea42604ce7a0666e8f447ec38d"
            },
            {
              name: "多行文本",
              value: "1",
              key: "b3a8b3894cf042baa744d7efa189592a"
            }
          ],
          name: "发起人",
          type: "start",
          nodeId: "4c1e626646e8487687411d044d0b21f2",
          properties: {
            contentLabel: "所有人",
            type: "starter",
            category: "0",
            content: ""
          },
          childNode: {
            nextId:
              "139df798003444bcacee7e56a0707adc,bf1021ab34024051a4994635d1c832bf,b29755d09fd543468bc949cfdc7f9ef3",
            name: "分支1",
            prevId: "4c1e626646e8487687411d044d0b21f2",
            type: "route",
            nodeId: "c6eeb77f3dc242aebc6ec96852b28ee3",
            childNode: {
              nextId: "",
              auth: [
                {
                  name: "金额",
                  value: "2",
                  key: "7ba099ea42604ce7a0666e8f447ec38d"
                },
                {
                  name: "多行文本",
                  value: "2",
                  key: "b3a8b3894cf042baa744d7efa189592a"
                }
              ],
              name: "审批人",
              prevId: "c6eeb77f3dc242aebc6ec96852b28ee3",
              type: "approver",
              nodeId: "b29755d09fd543468bc949cfdc7f9ef3",
              properties: {
                activateType: "ONE_BY_ONE",
                actionerRules: [
                  {
                    approvals: [],
                    actType: "or",
                    subType: "3",
                    type: "target_select"
                  }
                ],
                type: "approver",
                agreeAll: false
              },
              childNode: ""
            },
            parallelismNodes: [
              {
                nextId: "fd5c709ac465469bbe59cb433d454199",
                name: "",
                prevId: "c6eeb77f3dc242aebc6ec96852b28ee3",
                type: "parallelism",
                priority: "1.0",
                nodeId: "139df798003444bcacee7e56a0707adc",
                childNode: {
                  nextId: "",
                  auth: [
                    {
                      name: "金额",
                      value: "2",
                      key: "7ba099ea42604ce7a0666e8f447ec38d"
                    },
                    {
                      name: "多行文本",
                      value: "2",
                      key: "b3a8b3894cf042baa744d7efa189592a"
                    }
                  ],
                  name: "审批人1_1",
                  prevId: "139df798003444bcacee7e56a0707adc",
                  type: "approver",
                  nodeId: "fd5c709ac465469bbe59cb433d454199",
                  properties: {
                    activateType: "ONE_BY_ONE",
                    actionerRules: [
                      {
                        approvals: [],
                        actType: "or",
                        subType: "3",
                        type: "target_select"
                      }
                    ],
                    type: "approver",
                    agreeAll: false
                  },
                  childNode: {
                    nextId: "",
                    auth: [
                      {
                        name: "金额",
                        value: "2",
                        key: "7ba099ea42604ce7a0666e8f447ec38d"
                      },
                      {
                        name: "多行文本",
                        value: "2",
                        key: "b3a8b3894cf042baa744d7efa189592a"
                      }
                    ],
                    name: "审批人1_2",
                    prevId: "4c1e626646e8487687411d044d0b21f2",
                    type: "approver",
                    nodeId: "7954f7a941704b65a029ce250c8adb28",
                    properties: {
                      activateType: "ONE_BY_ONE",
                      actionerRules: [
                        {
                          approvals: [],
                          actType: "or",
                          subType: "3",
                          type: "target_select"
                        }
                      ],
                      type: "approver",
                      agreeAll: false
                    },
                    childNode: ""
                  }
                }
              },
              {
                nextId: "8dad356f6e0a479d890326c647dc77cd,450149b8ced943f3849c96caf8bff90d",
                name: "",
                prevId: "c6eeb77f3dc242aebc6ec96852b28ee3",
                type: "parallelism",
                nodeId: "bf1021ab34024051a4994635d1c832bf",
                childNode: {
                  nextId:
                    "e4e6fe160d7d4ed2afc08bd9f07fa3cf,c7203875b9a84d54b955800e311c3e56,0b0acd8add74465eab2d69c088c57ad5",
                  name: "分支2",
                  prevId: "bf1021ab34024051a4994635d1c832bf",
                  type: "route",
                  nodeId: "450149b8ced943f3849c96caf8bff90d",
                  childNode: "",
                  parallelismNodes: [
                    {
                      nextId: "f321be68edbd4880b9e1688c74df7424",
                      name: "",
                      prevId: "450149b8ced943f3849c96caf8bff90d",
                      type: "parallelism",
                      priority: "1.0",
                      nodeId: "e4e6fe160d7d4ed2afc08bd9f07fa3cf",
                      childNode: {
                        nextId: "",
                        auth: [
                          {
                            name: "金额",
                            value: "2",
                            key: "7ba099ea42604ce7a0666e8f447ec38d"
                          },
                          {
                            name: "多行文本",
                            value: "2",
                            key: "b3a8b3894cf042baa744d7efa189592a"
                          }
                        ],
                        name: "审批人2_1",
                        prevId: "e4e6fe160d7d4ed2afc08bd9f07fa3cf",
                        type: "approver",
                        nodeId: "f321be68edbd4880b9e1688c74df7424",
                        properties: {
                          activateType: "ONE_BY_ONE",
                          actionerRules: [
                            {
                              approvals: [],
                              actType: "or",
                              subType: "3",
                              type: "target_select"
                            }
                          ],
                          type: "approver",
                          agreeAll: false
                        },
                        childNode: {
                          nextId: "",
                          auth: [
                            {
                              name: "金额",
                              value: "2",
                              key: "7ba099ea42604ce7a0666e8f447ec38d"
                            },
                            {
                              name: "多行文本",
                              value: "2",
                              key: "b3a8b3894cf042baa744d7efa189592a"
                            }
                          ],
                          name: "审批人2_2",
                          prevId: "bf1021ab34024051a4994635d1c832bf",
                          type: "approver",
                          nodeId: "8dad356f6e0a479d890326c647dc77cd",
                          properties: {
                            activateType: "ONE_BY_ONE",
                            actionerRules: [
                              {
                                approvals: [],
                                actType: "or",
                                subType: "3",
                                type: "target_select"
                              }
                            ],
                            type: "approver",
                            agreeAll: false
                          },
                          childNode: ""
                        }
                      }
                    },
                    {
                      nextId: "3e5d85f5fdc2430abffc68b4b86eeaa8",
                      name: "",
                      prevId: "450149b8ced943f3849c96caf8bff90d",
                      type: "parallelism",
                      nodeId: "c7203875b9a84d54b955800e311c3e56",
                      childNode: {
                        nextId: "",
                        auth: [
                          {
                            name: "金额",
                            value: "2",
                            key: "7ba099ea42604ce7a0666e8f447ec38d"
                          },
                          {
                            name: "多行文本",
                            value: "2",
                            key: "b3a8b3894cf042baa744d7efa189592a"
                          }
                        ],
                        name: "审批人3_1",
                        prevId: "c7203875b9a84d54b955800e311c3e56",
                        type: "approver",
                        nodeId: "3e5d85f5fdc2430abffc68b4b86eeaa8",
                        properties: {
                          activateType: "ONE_BY_ONE",
                          actionerRules: [
                            {
                              approvals: [],
                              actType: "or",
                              subType: "3",
                              type: "target_select"
                            }
                          ],
                          type: "approver",
                          agreeAll: false
                        },
                        childNode: ""
                      }
                    },
                    {
                      nextId: "56b8ea405c6943ca86e79edb904c9a5a",
                      name: "分支3",
                      prevId: "450149b8ced943f3849c96caf8bff90d",
                      type: "parallelism",
                      nodeId: "0b0acd8add74465eab2d69c088c57ad5",
                      childNode: {
                        nextId: "",
                        auth: [
                          {
                            name: "金额",
                            value: "2",
                            key: "7ba099ea42604ce7a0666e8f447ec38d"
                          },
                          {
                            name: "多行文本",
                            value: "2",
                            key: "b3a8b3894cf042baa744d7efa189592a"
                          }
                        ],
                        name: "审批人4_1",
                        prevId: "0b0acd8add74465eab2d69c088c57ad5",
                        type: "approver",
                        nodeId: "56b8ea405c6943ca86e79edb904c9a5a",
                        properties: {
                          activateType: "ONE_BY_ONE",
                          actionerRules: [
                            {
                              approvals: [],
                              actType: "or",
                              subType: "3",
                              type: "target_select"
                            }
                          ],
                          type: "approver",
                          agreeAll: false
                        },
                        childNode: ""
                      }
                    }
                  ]
                }
              }
            ]
          }
        };
      }
    },
    nodeId: {
      default: ""
    },
    applyUser: {
      type: String
    },
    creator: {
      type: String
    },
    instanceId: {
      type: String
    },
    sourceName: {
      default: "todo"
    },
    opinionVisible: {
      type: String,
      default: "0"
    }
  },
  computed: {
    curNodeIDs() {
      if (this.nodeId) {
        return this.nodeId.split(",");
      } else return [];
    }
  },
  mounted() {
    this.getListArr(this.flowList);
  },
  methods: {
    getRuleType(line) {
      if (line.properties && line.properties.actionerRules) return line.properties.actionerRules[0].type;
      else return "";
    },
    getApprovalList(line) {
      if (line.properties && line.properties.actionerRules) return line.properties.actionerRules[0].approvals;
      else return [];
    },
    getNoneActionerAction(line) {
      return line.properties.actionerRules[0].noneActionerAction;
    },
    getAutoPass(line, text) {
      if (line.type == "approver") {
        let approveList = line.properties.actionerRules[0].approvals.length;
        let noneActionerAction = this.getNoneActionerAction(line);
        if (approveList == 0 && noneActionerAction == text) return true;
        else return false;
      } else return false;
    },
    getActType(line, text) {
      if (line.type == "approver") {
        let actT = line.properties.actionerRules[0].actType;
        let approveList = line.properties.actionerRules[0].approvals.length;
        if (actT == text && approveList > 1) return true;
        else return false;
      } else return false;
    },
    getAppproveOriNode(line) {
      if (line.type == "approver") {
        let ruleT = line.properties.actionerRules[0].type;
        if (ruleT == "target_originator") return true;
        else return false;
      } else return false;
    },
    getApproveNode(line) {
      if (line.type == "approver") {
        let ruleT = line.properties.actionerRules[0].type;
        if (ruleT == "target_post" || ruleT == "target_pos" || ruleT == "target_charge") return true;
        else return false;
      } else return false;
    },
    getListArr(flow) {
      this.flowListArr.push({
        nextId: flow.nextId,
        name: flow.name,
        type: flow.type,
        nodeId: flow.nodeId,
        prevId: flow.prevId,
        properties: flow.properties,
        parallelismNodes: flow.parallelismNodes
      });
      if (flow.childNode) this.getListArr(flow.childNode);
    },
    /**
     * @function cbClick
     * @description: 催办接口
     * @param {*}
     */
    cbClick() {
      let par = {
        serviceName: "plugin",
        servicePath: "grid",
        instanceId: this.instanceId
      };
      this.$request(par).then(result => {
        if (result.status == "1") {
          this.$message.success(result.msgInfo);
        } else {
          this.$message.error(result.msgInfo);
        }
      });
    },
    /**
     * @function getIconName
     * @description: 根据节点状态设置回显图标
     * @param {*}
     */
    getIconName(line) {
      if (line.type === "start") return "icon-full-flow-agree";
      if (line.type === "route") return this.getRouteApproveStatus(line);
      let item = this.getApprovalList(line)[0];
      return item.status === "1" && item.nodeId == this.nodeId
        ? "icon-full-flow-doing"
        : item.status === "2"
        ? "icon-full-flow-agree"
        : item.status === "3"
        ? "icon-full-flow-disagree"
        : item.status == "4"
        ? "icon-full-flow-back"
        : item.status == "5"
        ? "icon-full-flow-agree"
        : item.status == "6"
        ? "icon-full-flow-agree"
        : item.status == "7"
        ? "icon-full-flow-share"
        : "";
    },
    // 判断平行分支是否全部审批完成
    getRouteApproveStatus(line) {
      let { poeList, routeNodeId } = this.getRoutePeople(line);
      let status = poeList.map(p => p.status);
      let uniA = Array.from(new Set(status));
      if (uniA.length == 1 && uniA[0] == "2") return "icon-full-flow-agree";
      let svgID = "";
      this.curNodeIDs.forEach(id => {
        if (routeNodeId.indexOf(id) > 0) {
          svgID = "icon-full-flow-doing";
        }
      });
      return svgID;
    },
    /**
     * @function getstatus
     * @description: 回显状态名称， type: 0发起人， 1审批人， 2抄送人
     * @param {*}
     */
    getstatus(line) {
      let item = this.getApprovalList(line)[0];
      //  1: 有效 2： 同意 3. 不同意 4： 退回 5：自动同意 6：自动通过
      return item.status == "1" && line.nodeId == this.nodeId
        ? "(审批中)"
        : item.status == "2"
        ? "(已同意)"
        : item.status == "3"
        ? "(不同意)"
        : item.status == "4"
        ? "(退回)"
        : item.status == "5"
        ? "(自动同意)"
        : item.status == "6"
        ? "(自动通过)"
        : item.status == "7"
        ? "(转审批)"
        : "";
    },
    // 获取平行分支节点的 审批人列表
    getRoutePeople(line) {
      let _this = this;
      let poeList = [];
      let routeNodeId = [];
      line.parallelismNodes.forEach(parall => {
        _this.getChildNodePeo(parall.childNode, poeList, routeNodeId);
      });
      return { poeList, routeNodeId };
    },
    // 对平行分支的一个递归操作
    getChildNodePeo(childNode, poeList, routeNodeId) {
      let _this = this;
      if (childNode.type === "route" && childNode.parallelismNodes) {
        childNode.parallelismNodes.forEach(parall => {
          _this.getChildNodePeo(parall.childNode, poeList, routeNodeId);
        });
      } else {
        let pl = childNode.properties.actionerRules[0].approvals;
        routeNodeId.push(childNode.nodeId);
        pl.forEach(p => {
          poeList.push(p);
        });
      }
      if (childNode.childNode) {
        _this.getChildNodePeo(childNode.childNode, poeList, routeNodeId);
      }
    }
  }
};
</script>


<style lang="scss">

.eg-timeline-parallel-todo {
  .list-node {
    color: rgba(0, 0, 0, 0.9);
    font-size: 12px;
    margin: 0;
  }
  .line-item .ant-timeline-item-head {
    padding: 0 !important;
    .status-icon {
      position: absolute;
      bottom: 0px;
      right: 0px;
    }
    .circle {
      border-radius: 50%;
      border: 1px solid #e8e8e8;
      display: inline-block;
      overflow: hidden;
      width: 32px;
      height: 32px;
      background-color: rgb(63, 143, 255);
      .svg-icon {
        margin-top: 5px;
      }
    }
    .eg-photo {
      border-radius: 50%;
      overflow: hidden;
      display: inline-block;
      border: 1px solid #e8e8e8;
      img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        border-radius: 50%;
        border: 1px solid #e8e8e8;
      }
    }
  }
  .ant-timeline-item {
    // padding-bottom: $spacing-xxl !important;
    padding-bottom: 20px !important;

  }

  & > .line-item {
    & > .ant-timeline-item-content {
      left: 8px;
      margin: 0 0 0 22px;
      top: -15px;

      .line-right {
        width: 100%;
        display: inline-block;
        .eg-head-group {
          margin-top: 13px;
        }
        .parallel-node {
          background: #f5f5f5;
          border-radius: 4px;
        }
        .ant-btn {
          vertical-align: top;
          margin-left: 12px;
          margin-right: 12px;
        }
      }
    }
  }
}
</style>

